<template>
  <s-layout :title="pageTitle" :bgStyle="{ color: '#fff' }">
    <view class="type-box ss-flex ss-col-center">
      <view
        v-for="(item, index) in state.typeList"
        :key="index"
        class="type-item"
        :class="{ active: state.queryParams.category == item.value }"
        @tap="changeType(item)"
      >
        {{ item.label }}
      </view>
    </view>
    <view class="ss-m-20">
      <view
        v-for="item in state.dataList"
        :key="item.id"
        class="news-item ss-flex"
        @click="sheep.$router.go('/pages/news/news-detail', { id: item.id })"
      >
        <image :src="sheep.$url.cdn(item.cover)" class="news-img" mode="scaleToFill" />
        <view class="news-content ss-flex-1 ss-flex-col ss-row-between">
          <view class="news-title ss-line-2">{{ item.title }}</view>
          <view class="news-time">{{ item.createtime }}</view>
        </view>
      </view>
      <uni-load-more
        v-if="state.total > 0"
        :status="state.loadStatus"
        :content-text="{
          contentdown: '上拉加载更多',
        }"
        @tap="loadmore"
      />
    </view>
  </s-layout>
</template>

<script setup>
import sheep from "@/sheep";
import { reactive, computed } from "vue";
import { onLoad, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";

const state = reactive({
  typeList: [
    { label: "新闻", value: "news" },
    { label: "活动", value: "active" },
    { label: "公告", value: "platform" },
  ],
  total: 0, // 总条数
  loadStatus: "", // 加载状态
  queryParams: {
    page: 1,
    category: "新闻", // 当前类型
    list_rows: 10,
  },
  dataList: [],
});

const pageTitle = computed(() => {
  let row = state.typeList.find((i) => i.value == state.queryParams.category);
  return row ? row.label : "新闻";
});

// 切换类型
function changeType(item) {
  state.queryParams.category = item.value;
  getList();
}

// 获取列表
function getList() {
  state.loadStatus = "loading";
  sheep.$api.news
    .newsList(state.queryParams)
    .then((res) => {
      if (res.code == 1) {
        let list = res.data.data;
        state.dataList = state.queryParams.page == 1 ? list : state.dataList.concat(list);
        state.total = res.data.total;
      }
    })
    .finally(() => {
      if (state.total > state.dataList.length) {
        state.loadStatus = "more";
      } else {
        state.loadStatus = "noMore";
      }
      setTimeout(() => {
        uni.stopPullDownRefresh();
      }, 800);
    });
}

// 加载更多
function loadmore() {
  if (state.loadStatus !== "noMore") {
    state.queryParams.page++;
    getList();
  }
}

// 触底加载
onReachBottom(() => {
  loadmore();
});

//下拉刷新
onPullDownRefresh(() => {
  state.queryParams.page = 1;
  getList();
});

onLoad((e) => {
  state.queryParams.category = e.type;
  getList();
});
</script>

<style lang="scss" scoped>
.type-box {
  display: none;
  margin: 20rpx 30rpx;
  background-color: #fff;
  .type-item {
    font-size: 20rpx;
    padding: 10rpx 40rpx;
    border-radius: 10rpx;
    color: #979797;
    background-color: #f0f0f0;
    margin-right: 20rpx;
  }
  .active {
    color: #fff;
    background-color: #e7bd7d;
  }
}
.news-item {
  background-color: #f8f8f8;
  border-radius: 20rpx;
  padding: 18rpx 20rpx;
  margin-bottom: 20rpx;
  .news-img {
    width: 136rpx;
    height: 136rpx;
    border-radius: 10rpx;
    margin-right: 20rpx;
  }
  .news-content {
    font-size: 24rpx;
    height: 136rpx;
    .news-title {
      color: #555;
      line-height: 40rpx;
    }
    .news-time {
      color: #979797;
    }
  }
}
</style>
